<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" :label-position="'left'">

      <el-form-item style="margin-left:10px" label-width="68px" size="mini" label="项目名称" prop="project_name">
        <el-input v-model="queryParams.project_name" style="width: 150px;" placeholder="请输入项目名称" size="mini" />
      </el-form-item>

      <el-form-item style="margin-left:10px" label-width="68px" size="mini" label="出库单号" prop="warehouse_out_id">
        <el-input v-model="queryParams.warehouse_out_id" style="width: 150px; " placeholder="出库单号" size="mini" />
      </el-form-item>
      <el-form-item style="margin-left:10px" size="mini" label="sn码" prop="sn">
        <el-input v-model="queryParams.sn" style="width: 150px; " placeholder="sn码" size="mini" />
      </el-form-item>
<!--      <el-form-item style="margin-left:-15px" size="mini" label="搜索单号" prop="search_value">-->
<!--        <el-input-->
<!--          v-model="search_value"-->
<!--          style="width: 220px; margin-top: 4px;"-->
<!--          size="mini"-->
<!--          :placeholder="number_type === 'customer_business_number' ? '请输入客户业务单号' : '请输入运单号'"-->
<!--          @input="handleNumberInput"-->
<!--        >-->
<!--          <el-select-->
<!--            v-model="number_type"-->
<!--            slot="prepend"-->
<!--            style="width: 110px;"-->
<!--            @change="handleTypeChange"-->
<!--          >-->
<!--            <el-option label="客户业务单号" value="customer_business_number" />-->
<!--            <el-option label="运单号" value="waybill" />-->
<!--          </el-select>-->
<!--        </el-input>-->
<!--      </el-form-item>-->

      <el-form-item style="margin-left:10px" size="mini" label="收货方" prop="ship_to">
        <el-input v-model="queryParams.ship_to" style="width: 150px;" placeholder="收货方" />
      </el-form-item>

<!--      <el-form-item style="margin-left:10px" size="mini" label="发货方" prop="shipper">-->
<!--        <el-input v-model="queryParams.shipper" style="width: 150px;" placeholder="发货方"/>-->
<!--      </el-form-item>-->

      <el-form-item label="日期范围" prop="date_select_type">
        <el-radio-group v-model="date_select_type">
          <el-radio style="width: 30px;" :label="'今天'">今天</el-radio>
          <el-radio style="width: 40px;" :label="'近7天'">近7天</el-radio>
          <el-radio style="width: 40px;" :label="'近30天'">近30天</el-radio>
          <el-radio style="width: 55px;" :label="'三个月前'">三个月前</el-radio>
          <el-radio style="width: 60px;" :label="'自定义'">自定义</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-show="date_select_type === '自定义'"
        label="创建日期"
      >
        <el-date-picker
          ref="pick1"
          v-model="queryParams.created_at"
          style="transform: translateY(5px); height: 20px; font-size: 12px; line-height: 20px;"
          value-format="yyyy-MM-dd"
          type="daterange"
          size="mini"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" style=" border-radius: 0;" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" style="margin-left: 0; border-radius: 0;" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <el-row :gutter="10" class="mb8" style="margin-bottom: -8px;">
      <el-col>
        <el-button
          v-action="'warehouseOut@create'"
          style=" border-radius: 0;"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="openCreate()"
        >新增
        </el-button>
        <el-button
          v-action="'warehouseOut@create'"
          style="margin-left: 0;
          border-radius: 0;"
          type="danger"
          size="mini"
          @click="delPort()"
        >删除</el-button>

        <el-button
          style="margin-left: 0px; border-radius: 0px;"
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          @click="exportOrders"
        >导出
        </el-button>
        <el-button
          style="margin-left: 0px; border-radius: 0px;"
          type="success"
          plain
          icon="el-icon-upload"
          size="mini"
          @click="importOrders"
        >批量导入
        </el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-popover placement="bottom" width="50" trigger="click">
        <el-checkbox-group v-model="checkedTableColumns">
          <el-checkbox
            v-for="(item, index) in colTableHeaderTit"
            :key="index"
            :label="item.label"
          >{{ item.label }}</el-checkbox>
        </el-checkbox-group>
        <el-button
          slot="reference"
          type="primary"
          style="margin-right: 10px;
          position: relative;
          bottom: 15px;"
        >设置显示字段
        </el-button>
      </el-popover>
    </el-row>
    <el-table
      ref="table"
      v-loading="loading"
      class="table-wrap"
      :data="tableData"
      row-key="id"
      border
      fit
      header-cell-class-name="header-cell-color"
      @selection-change="handleSelectionChange"
      @cell-dblclick="dblclick"
    >
      <el-table-column
        type="selection"
        width="45"
      />
      <el-table-column
        v-for="(item, index) in bindTableColumns"
        :key="`colTableHeaderTit_${index}`"
        class-name="allowDrag"
        show-overflow-tooltip
        :prop="tableHeaderTit[index].field"
        :label="tableHeaderTit[index].label"
        align="center"
      />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      size="mini"
      @pagination="getList"
    />
    <!-- 新增 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">

        <el-form-item label="项目和委托方" prop="project_id">
          <el-cascader v-model="form.project_id" :options="project" style="width: 100%" />
        </el-form-item>
        <!-- <el-form-item label="客户业务单号" prop="customer_business_number">
          <el-input v-model="form.customer_business_number" />
        </el-form-item> -->
        <!--        <el-form-item label="客户订单类型" prop="customer_order_type">-->
        <!--          <el-select-->
        <!--            v-model="form.customer_order_type"-->
        <!--            placeholder="客户订单类型"-->
        <!--            filterable-->
        <!--            allow-create-->
        <!--            clearable-->
        <!--            size="small"-->
        <!--            style="width: 100%"-->
        <!--          >-->
        <!--            <el-option label="销售出库" value="销售出库" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="运输方式" prop="transport_type">
          <el-select
            v-model="form.transport_type"
            placeholder="运输方式"
            filterable
            allow-create
            clearable
            size="small"
            style="width: 100%"
          >
            <el-option label="陆运" value="陆运" />
            <el-option label="海运" value="海运" />
            <el-option label="空运" value="空运" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品总数量" prop="goods_number">
          <el-input v-model="form.goods_number" />
        </el-form-item>
        <el-form-item label="参考单号1" prop="odd_numbers_one">
          <el-input v-model="form.odd_numbers_one" />
        </el-form-item>
        <el-form-item label="参考单号2" prop="odd_numbers_two">
          <el-input v-model="form.odd_numbers_two" />
        </el-form-item>
        <el-form-item label="参考单号3" prop="odd_numbers_three">
          <el-input v-model="form.odd_numbers_three" />
        </el-form-item>
        <el-form-item label="司机名称" prop="driver_name">
          <el-input v-model="form.driver_name" />
        </el-form-item>
        <el-form-item label="司机电话" prop="driver_phone">
          <el-input v-model="form.driver_phone" />
        </el-form-item>
        <el-form-item label="车牌号" prop="driver_plate">
          <el-input v-model="form.driver_plate" />
        </el-form-item>
        <el-form-item label="发货方" prop="shipper">
          <el-input v-model="form.shipper" />
        </el-form-item>
        <el-form-item label="发货人姓名" prop="shipper_name">
          <el-input v-model="form.shipper_name" />
        </el-form-item>
        <el-form-item label="发货人电话" prop="shipper_phone">
          <el-input v-model="form.shipper_phone" />
        </el-form-item>
        <el-form-item label="发货方省/市/区" prop="shipper_city">
          <el-cascader v-model="form.shipper_city" :options="areaOptions" style="width: 100%" />
        </el-form-item>
        <el-form-item label="发货人具体地址" prop="shipper_address">
          <el-input v-model="form.shipper_address" />
        </el-form-item>
        <el-form-item label="收货方" prop="ship_to">
          <el-input v-model="form.ship_to" />
        </el-form-item>
        <el-form-item label="收货联系人姓名" prop="ship_to_name">
          <el-input v-model="form.ship_to_name" />
        </el-form-item>
        <el-form-item label="收货人联系电话" prop="ship_to_phone">
          <el-input v-model="form.ship_to_phone" />
        </el-form-item>
        <el-form-item label="收货方省/市/区" prop="ship_to_city">
          <el-cascader v-model="form.ship_to_city" :options="areaOptions" style="width: 100%" />
        </el-form-item>
        <el-form-item label="收货人具体地址" prop="ship_to_address">
          <el-input v-model="form.ship_to_address" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" />
        </el-form-item>
        <el-form-item label="创建日期">
          <div class="block">
            <el-date-picker
              v-model="form.new_order_date"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 100%;"
            />
          </div>
        </el-form-item>
        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button size="medium" @click="open = false">取消</el-button>

          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <el-dialog custom-class="dialogClass"  title="上传出库数据表格" :visible.sync="openImportOrderStatus" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="50px" class="demo-ruleForm">
        <el-form-item>
        <el-button @click="downloadTemp" type="primary"
       style="width: 360px;font-size: 15px;">下载导入出库表格模板</el-button>
        </el-form-item>
        <el-form-item>
          <el-upload
            :action="imageAction"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :limit="1"
            :headers="{ 'Authorization': 'Bearer ' + authToken }"
            :on-exceed="handleExceed"
            auto-upload
            class="upload-demo"
            drag
            name="excelOutGoods"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip" style="color:red;text-align:center; ">*注：请使用系统提供的出库表格模板上传。</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 打印 -->
    <Print :open-one.sync="openOne" :warehouse-id="warehouseId" />

  </div>
</template>
<style>
.el-input__inner {
  width: 90%;
}

.el-input__suffix {
  right: 10%;
}
.el-form-item__content {
  padding: 0px!important;
  display: flex;
  align-items: center;
}

/* 添加新的样式 */
.el-input-group__prepend {
  padding: 0 !important;
}
.el-input-group__prepend .el-select {
  margin: 0 !important;
}
.el-select .el-input {
  width: 110px !important;
}
.dialogClass .el-dialog__header {
  background-color: #58aefc;
  padding-top: 10px;
}
.dialogClass .el-dialog__title {
  color: #fff;
  font-size: 20px;
}
.dialogClass .el-dialog__close {
  color: #fff;
}

</style>
<script>
import Sortable from 'sortablejs'
import {downloadFile, warehouseOutList, createWarehouseOut, updateWarehouseOut, delWarehouseOut, getProject, exportExcel, exportOrders } from '@/api/storehouse'
import { getArea, codeToText } from '@/utils/get-china-area'
import Print from './Print'
import { parseTime } from '@/utils'
import {getToken} from "@/utils/auth";

export default {
  name: 'StorehouseWarehouseOut2',
  components: {
    Print
  },
  data() {
    return {
      date_select_type: '近30天',
      number_type: 'customer_business_number',
      imageAction: process.env.VUE_APP_BASE_API + '/storehouse/warehouseOut/importWarehouseOut',
      search_value: '',
      authToken: this.$store.state.user.token,
      tableHeaderTit: [
        { label: '出库主单编号', field: 'warehouse_out_id', isShow: true, minWidth: 50 },
        { label: '项目/委托方', field: 'project_name', isShow: true, minWidth: 50 },
        // { label: '客户业务单号', field: 'customer_business_number', isShow: true, minWidth: 50 },
        { label: '运输方式', field: 'transport_type', isShow: true, minWidth: 50 },
        { label: '商品总数量', field: 'goods_number', isShow: true, minWidth: 50 },
        { label: '出库数量', field: 'actual_number', isShow: true, minWidth: 50 },
        // { label: '发货方', field: 'shipper_relation_name', isShow: true, minWidth: 50 },
        { label: '收货方', field: 'consignee_relation_name', isShow: true, minWidth: 50 },
        { label: '收货人', field: 'ship_to_name', isShow: true, minWidth: 50 },
        { label: '收货手机号', field: 'ship_to_phone', isShow: true, minWidth: 50 },
        { label: '收货地址', field: 'ship_to_address', isShow: true, minWidth: 50 },
        { label: '创建时间', field: 'created_at', isShow: true, minWidth: 50 },
        { label: '出库时间', field: 'updated_at', isShow: true, minWidth: 50 },
        { label: '出库状态', field: 'statusStr', isShow: true, minWidth: 50 },
        // { label: '发布人', field: 'pub_name', isShow: true, minWidth: 50 }
      ],
      colTableHeaderTit: [
        { label: '出库主单编号', field: 'warehouse_out_id', isShow: true, minWidth: 50 },
        { label: '项目/委托方', field: 'project_name', isShow: true, minWidth: 50 },
        // { label: '客户业务单号', field: 'customer_business_number', isShow: true, minWidth: 50 },
        { label: '运输方式', field: 'transport_type', isShow: true, minWidth: 50 },
        { label: '商品总数量', field: 'goods_number', isShow: true, minWidth: 50 },
        { label: '出库数量', field: 'actual_number', isShow: true, minWidth: 50 },
        // { label: '发货方', field: 'shipper_relation_name', isShow: true, minWidth: 50 },
        { label: '收货方', field: 'consignee_relation_name', isShow: true, minWidth: 50 },
        { label: '收货人', field: 'ship_to_name', isShow: true, minWidth: 50 },
        { label: '收货手机号', field: 'ship_to_phone', isShow: true, minWidth: 50 },
        { label: '收货地址', field: 'ship_to_address', isShow: true, minWidth: 50 },
        { label: '创建时间', field: 'created_at', isShow: true, minWidth: 50 },
        { label: '出库时间', field: 'updated_at', isShow: true, minWidth: 50 },
        { label: '出库状态', field: 'statusStr', isShow: true, minWidth: 50 },
        // { label: '发布人', field: 'pub_name', isShow: true, minWidth: 50 }
      ],
      tableData: [],
      nimabi: false,
      multipleSelection: [],
      activeName: 'first',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime())
            end.setTime(end.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '三个月前',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
            start.setTime(Date.parse('2000/01/01'))
            picker.$emit('pick', [start, end])
          }
        }]
      }, // 遮罩层
      loading: true,
      open: false,
      openImportOrderStatus:false,
      title: '',
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      project: [],
      openOne: false,
      info: '',
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        supplier_name: undefined
      },
      form: {},
      show: false,
      ids: [],
      multiple: false,
      warehouseId: '',
      rules: {
        project_id: [
          { required: true, message: '请选择项目和委托方', trigger: 'change' }
        ],
        // customer_order_type: [
        //   { required: true, message: '请填写客户订单类型', trigger: 'change' }
        // ],
        transport_type: [
          { required: true, message: '请填写运输方式', trigger: 'change' }
        ],
        goods_number: [
          { required: true, message: '请填写商品总数量', trigger: 'change' }
        ]
      },
      // 状态
      statusOptions: [
        { 'value': '0', 'label': '未出库' },
        { 'value': '1', 'label': '全部出库' },
        { 'value': '2', 'label': '部分出库' }
      ],
      areaOptions: undefined,
      goodsListVisible: false,
      selectionArr: []
    }
  },
  computed: {
    bindTableColumns() { // 表格展示的字段
      const res = this.colTableHeaderTit.filter((v) => {
        return v.isShow == true
      })
      this.tableHeaderTit = JSON.parse(JSON.stringify(res))
      return res
    },
    checkedTableColumns: {
      get() {
        return this.bindTableColumns.map((v) => v.label)
      },
      set(value) {
        this.nimabi = false
        this.colTableHeaderTit.forEach((v) => {
          if (value.includes(v.label)) {
            v.isShow = true
          } else {
            v.isShow = false
          }
        })

        // this.tableHeaderTit.forEach((v) => {
        //   if (value.includes(v.label)) {
        //     v.isShow = true
        //   } else {
        //     v.isShow = false
        //   }
        // })
      }
    }
  },
  watch: {
    'date_select_type': {
      handler(val) {
        switch (val) {
          case '今天':
            var end = new Date()
            var start = new Date()
            start = parseTime(start.getTime(), '{y}-{m}-{d}')
            end = parseTime(end.getTime() + 3600 * 1000 * 24, '{y}-{m}-{d}')
            this.$set(this.queryParams, 'created_at', [start, end])
            break
          case '近7天':
            var end = new Date()
            var start = new Date()
            start = parseTime(start.getTime() - 3600 * 1000 * 24 * 6, '{y}-{m}-{d}')
            end = parseTime(end.getTime() + 3600 * 1000 * 24, '{y}-{m}-{d}')
            this.$set(this.queryParams, 'created_at', [start, end])
            break
          case '近30天':
            var end = new Date()
            var start = new Date()
            start = parseTime(start.getTime() - 3600 * 1000 * 24 * 29, '{y}-{m}-{d}')
            end = parseTime(end.getTime() + 3600 * 1000 * 24, '{y}-{m}-{d}')
            this.$set(this.queryParams, 'created_at', [start, end])
            break
          case '三个月前':
            var end = new Date()
            var start = new Date()
            end = parseTime(end.getTime() - 3600 * 1000 * 24 * 89, '{y}-{m}-{d}')
            start = parseTime(Date.parse('2000/01/01'), '{y}-{m}-{d}')
            this.$set(this.queryParams, 'created_at', [start, end])
            break
          // case '自定义':
          //   var end = new Date()
          //   var start = new Date()
          //   start = parseTime(Date.parse('2000/01/01'), '{y}-{m}-{d}')
          //   end = parseTime(end.getTime(), '{y}-{m}-{d}')
          //   this.$set(this.queryParams, 'created_at', [start, end])
          //   break
        }
      },
      deep: true, // 深度监听
      immediate: true // 初次监听即执行
    }
  },
  mounted() {
    this.columnDrop() // 可拖拽列
  },
  created() {
    const id = this.$route.query.id
    if (id) {
      this.queryParams.warehouse_out_id = id
    }
    this.getList()
    this.areaOptions = getArea()
    this.getProject()
  },
  methods: {
    importOrders() {
      this.openImportOrderStatus=true;
    },
    async  downloadTemp(){
      window.open('http://172.16.0.16:8087/出库导入数据模板.xlsx', '_blank')
      // const response = await axios({
      //   url: process.env.VUE_APP_BASE_API+'/storehouse/warehouseOut/downloadFile', // 替换为实际的请求 URL
      //   method: 'GET',
      //   headers:{"authorization":'Bearer ' + getToken()},
      //   responseType: 'blob', // 重要：指定响应类型为 blob
      // });
      //
      // // 创建一个新的 URL 对象，并生成一个下载链接
      // const url = window.URL.createObjectURL(new Blob([response.data],
      //   { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
      // const link = document.createElement('a');
      // link.href = url;
      // link.setAttribute('download', 'goods.xlsx'); // 设置下载的文件名
      // link.style.display = 'none' // 隐藏元素
      // document.body.appendChild(link);
      // link.click();
      // // 清理 DOM 和释放 URL 对象
      // document.body.removeChild(link);
      // window.URL.revokeObjectURL(url);
    },
    handleSuccess(response, file) {
      if (response.code != 10000) {
        this.$notify.error({
          title: '错误',
          message: response.message
        })
      } else {
        if (response.code == 10000) {
          this.$notify({
            type: 'success',
            message: '导入成功'
          })
        }
      }
    },
    handleExceed(files, fileList) {
      this.$notify({
        type: 'error',
        message: '只支持单文件上传'
      })
    },
    beforeUpload(file) {
      const isLtSize = file.size / 1024 / 1024 < 50
      if (!isLtSize) {
        this.$message.error('最大支持 50MB!')
      }
      return isLtSize
    },
    exportOrders() {
      const that = this
      that.loading = true
      let params = {}
      // exportType 1:选中导出 2：列表导出
      if (that.ids.length > 0) {
        params.ids = that.ids.toString()
      } else {
        params = that.queryParams
      }

      exportOrders(params).then(response => {
        // console.log(response)
        if (response.code === 10000) {
          //var url = response.data.url.replace('127.0.0.1:8080', 'kg.com')
          window.open(response.data.url)
        } else {
          that.$message.error(response.message)
        }
        that.loading = false
      })
    },
    // 列拖拽
    columnDrop() {
      var _this = this
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        draggable: '.allowDrag', // 允许拖拽元素(el-table-column上设置class-name为允许拖拽)
        animation: 180,
        delay: 0,
        // 之前调用onEnd方法会出现表格DOM不更新以及表头对不上的情况所以更换为onUpdate方法
        // 参考资料 https://www.jianshu.com/p/fd6eb408d8bd
        onUpdate: function(evt) {
          // 修改items数据顺序
          var newIndex = evt.newIndex
          var oldIndex = evt.oldIndex
          const newItem = wrapperTr.children[newIndex]
          const oldItem = wrapperTr.children[oldIndex]

          // 先删除移动的节点
          wrapperTr.removeChild(newItem)
          // 再插入移动的节点到原有节点，还原了移动的操作
          if (newIndex > oldIndex) {
            wrapperTr.insertBefore(newItem, oldItem)
          } else {
            wrapperTr.insertBefore(newItem, oldItem.nextSibling)
          }
          // 更新items数组(index-1是第一列有一个多选列不支持拖拽,否则会有排序错乱的问题)
          var item = _this.tableHeaderTit.splice(oldIndex - 1, 1)
          _this.tableHeaderTit.splice(newIndex - 1, 0, item[0])
        }

      })
    },
    dblclick(row, column, cell, event) {
      console.log(1, row)
      this.handleEdit(row)
      console.log(row)
    },
    /** 编辑按钮操作 */
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      // this.open = true
      this.$router.push({
        path: '/storehouse/warehouseOut2/AddEdit:' + row.warehouse_out_id,
        query: { warehouse_out_id: row.warehouse_out_id, status: row.status, _form: JSON.stringify(this.form), AllNumber: row.goods_number }
      })
      this.title = '编辑'
    },

    download(row) {
      console.log(row.warehouse_out_id)
      var id = row.warehouse_out_id
      exportExcel(id).then(res => {
        console.log(res)
        if (res.code === 10000) {
          var url = res.data.url
          window.open(url)
          this.$notify({
            message: '下载成功',
            type: 'success'
          })
        } else {
          this.$notify({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    prints(row) {
      this.openOne = true
      this.warehouseId = row.warehouse_out_id
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    codeToText(arr) {
      return codeToText(arr)
    },
    /** 打开 */
    handleCreate(row, title) {
      const that = this
      that.form = row
      that.title = title
      that.open = true
      if (that.$refs['form']) {
        that.$refs['form'].clearValidate()
      }
    },
    /** 状态字典翻译 */
    statusFormat(row, column) {
      let status = row.status
      for (const d of this.statusOptions) {
        if (row.status === d.value) {
          status = d.label
          break
        }
      }
      return status
    },
    /** 查询清单列表 */
    getList() {
      this.loading = true
      // console.log(this.queryParams)
      warehouseOutList(this.queryParams).then(response => {
        this.loading = false
        if (response.code == 10000) {
          if (response.data.length > 0) {
            response.data.forEach(item => {
              if (item.status == '0') { item['statusStr'] = '未出库' }
              if (item.status == '1') { item['statusStr'] = '全部出库' }
              if (item.status == '2') { item['statusStr'] = '部分出库' }
            })
          }
          this.tableData = response.data
          this.total = response.count
        }
      })
    },
    getProject() {
      getProject({}).then(response => {
        this.project = response.data
      })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.form.new_order_date == undefined) {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            that.form.new_order_date = year + '-' + month + '-' + day
          }
          if (!that.form.id) {
            createWarehouseOut(that.form).then(response => {
              // console.log(response)
              that.$notify.success(response.message)
              that.open = false
              that.getList()
            })
          } else {
            updateWarehouseOut(that.form).then(response => {
              // console.log(response)
              that.$notify.success(response.message)
              that.open = false
              that.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    delPort() {
      const that = this
      let arr = []
      arr = that.selectionArr.map(item => item.status)
      const params = {
        id: that.ids
      }
      that.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        if (arr.indexOf('1') < 0 && arr.indexOf('1') < 0) {
          delWarehouseOut(params).then(response => {
            that.$notify.success(response.message)
            that.getList()
          })
        } else {
          that.$notify.warning('请选择未出库状态的数据')
        }
      }).catch(() => {
      })
    },
    openCreate() {
      this.$router.push({
        path: '/storehouse/warehouseOut2/AddEdit:' + `_random_${(new Date()).getTime()}`,
        query: { }
      })
      // this.open = true
      // this.title = '选择商品'

      // this.form = {}
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 20,
        customer_business_number: undefined,
        waybill: undefined,
        supplier_name: undefined
      }
      this.number_type = 'customer_business_number'
      this.search_value = ''
      this.handleQuery()
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      console.log('拖拽')
      this.selectionArr = selection
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    /** 入库商品 */
    goods(row) {
      this.$router.push({
        path: '/storehouse/warehouseOutSon',
        query: { warehouse_out_id: row.warehouse_out_id, AllNumber: row.goods_number }
      })
    },
    handleTypeChange(value) {
      // 切换搜索类型时，清空搜索值并重置查询参数
      this.search_value = '';
      this.queryParams.customer_business_number = undefined;
      this.queryParams.waybill = undefined;
    },
    handleNumberInput(value) {
      // 根据选择的类型,设置对应的查询参数
      if (this.number_type === 'customer_business_number') {
        this.queryParams.customer_business_number = value;
        this.queryParams.waybill = undefined;
      } else {
        this.queryParams.waybill = value;
        this.queryParams.customer_business_number = undefined;
      }
    }
  }
}
</script>

<style scoped>
.el-form-item--small .el-form-item__label {
  font-size: 12px;
}

.el-input--mini .el-input__inner {
  height: 20px;
}
.el-input, .el-input input{
  width:130px;
}
.el-date-editor--daterange.el-input__inner{
  /* width: 0 !important; */
}
/* .el-range-editor--mini.el-input__inner {
  height: 20px;
} */
</style>

